<template>
  <div class="person">
    <h2>需求：当水温达到60度，或者水位达到80cm时，发请求</h2>
    <h2>当前水温为：{{ temp }}</h2>
    <h2>当前水位为：{{ height }}</h2>
    <button @click="changeTemp">点我水温+10</button>
    <button @click="changeHeight">点我水位+10</button>
  </div>
</template>
  <script setup lang='ts'>
import { ref, watch, watchEffect } from "vue";
let temp = ref(10);
let height = ref(0);

function changeTemp() {
  temp.value += 10;
}
function changeHeight() {
  height.value += 10;
}

//1.利用watch监听水温和水位
// watch--你说监视谁就监视谁
// watch([temp, height], (nVal, oVal) => {
//   // console.log("nVal==",nVal,"oVal===",oVal);
//   //结构，从nVal中获取最新的水温（newTemp）和最新的水位（newHeight）
//   let [newTemp, newHeight] = nVal;
//   // console.log("newTemp===",newTemp);
//   // console.log("newHeight===",newHeight);
//   if (newTemp >= 60 || newHeight >= 80) {
//     console.log("发请求");
//   }
// });

//2.watchEffect-自动监视多个
//一上来就会监视一次，类似于加了immediate:true
watchEffect(() => {
  // console.log("1111111111111111");
  //这里写什么，监视什么数据
  if (temp.value >= 60 || height.value >= 80) {
    console.log("发请求");
  }
});
</script>
  <style scoped>
.person {
  background-color: skyblue;
  box-shadow: 0 0 10px;
  border-radius: 10px;
  padding: 20px;
}
</style>